<template>
    <van-nav-bar title="意见反馈" left-arrow fixed placeholder />
    <!-- 反馈类型选择 -->
    <div class="complaint-page">
        <p class="complaint-type">请选择您要反馈的问题类型：</p>
        <van-field
            is-link
            readonly
            placeholder="选择问题类型"
            @click="showPopup = true"
        />
        <van-popup :show="showPopup" round position="bottom">
            <van-picker
                :columns="columns"
                @cancel="showPopup = false"
            />
        </van-popup>
    </div>
    <!-- 反馈内容输入 -->
    <div class="complaint-page">
        <p class="complaint-type">请告诉小游匣反馈信息：</p>
        <van-field type="textarea" placeholder="输入反馈内容" />
    </div>
    <!-- 建议类型选择 -->
    <div class="complaint-page">
        <p class="complaint-type">请选择您提供的建议类型：</p>
        <van-field
            is-link
            readonly
            placeholder="选择建议类型"
            @click="showAdvice = true"
        />
        <van-popup :show="showAdvice" round position="bottom">
            <van-picker
                :columns="adviceColumns"
                @cancel="showAdvice = false"
            />
        </van-popup>
    </div>
    <!-- 建议内容输入 -->
    <div class="complaint-page">
        <p class="complaint-type">请告诉小游匣您的建议：</p>
        <van-field type="textarea" placeholder="输入建议内容" />
    </div>
    <!-- 联系信息输入 -->
    <div class="complaint-page">
        <p class="complaint-type">最后，请告诉小游匣您的联系信息：</p>
        <van-field label="您的用户名" placeholder="请输入您的用户名" style="margin-bottom: 5px;"/>
        <van-field label="您的联系方式" placeholder="请输入您的电话号码" type="tel" />
    </div>
    <van-button class="submit-btn" type="primary">提交反馈</van-button>
    <div style="height: 100px;"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 定义问题类型列表
const columns = ref([
    {
        text:'功能使用类',value:'functionUse'
    },
    {
        text:'内容服务类',value:'contentService'
    },
    {
        text:'技术故障类',value:'technicalFault'
    },
    {
        text:'个性化需求',value:'personalizedDemand'
    },
    {
        text:'其他问题',value:'otherQuestions'
    }
])
// 定义建议类型列表
const adviceColumns = ref([
    {
        text:'功能优化',value:'functionOptimization'
    },
    {
        text:'内容拓展',value:'contentExpansion'
    },
    {
        text:'界面交互',value:'interfaceInteraction'
    },
    {
        text: '性能问题',value: 'performanceProblem'
    },
    {
        text:'其他建议',value:'otherSuggestions'
    }
])
// 定义弹出层是否显示
const showPopup = ref(false)
// 定义建议类型弹出层是否显示
const showAdvice = ref(false)
</script>

<style scoped lang="less"> 
    .complaint-page{
        padding: 10px;
        .complaint-type{
            padding-bottom: 10px;
            font-size: 25px;
            font-family: 'dingLieXiDaFont', sans-serif;
        }
        // 为表单字段添加圆角
        :deep(.van-field) {
            border-radius: 10px;
            overflow: hidden;
        }
        :deep(.van-field__control) {
            border-radius: 10px;
        }
        // 为输入框添加圆角样式
        :deep(.van-field__body) {
            border-radius: 10px;
        }
        // 为链接箭头添加圆角
        :deep(.van-field__right-icon) {
            border-radius: 10px;
        }
    }
    .submit-btn{
        position: fixed;
        bottom: 20px;
        left: 0;
        right: 0;
        margin: 10px;
    }
</style>